iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
自我挑戰組

WordPress 客製化從 0 開始系列 第 4

Day 4 用 WordPress 了解 head 記載的中繼資料及靜態資源

  • 分享至 

  • xImage
  •  

大家好,我是 Eric。

第二天與第三天的內容,都是針對 <body> 中的標籤做的說明。顧名思義,<body> 中記載的內容,就是會直接透過瀏覽器轉譯的可見內容。
今天,讓我們再回到 header.php 這個檔案,可以發現在 <body> 的上方,還有另一個名為 <head> 的區塊:

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >

		<link rel="profile" href="https://gmpg.org/xfn/11">

		<?php wp_head(); ?>

	</head>

<head> 中,我們看見了 <meta><link> 這兩種標籤,除此之外,還有名為 <script><style><title> 的標籤。前四種標籤,是我們今天的主角,而 <title> 的目的,則是告訴瀏覽器,當前頁面的標題名稱,一般來說,便是以 WordPress 頁面或文章的標題為標題,因為功能單純,因此不多加贅述。

中繼資料 (meta data)

如果你是行銷人員,或是行銷背景出身,這個區塊對你來說會特別重要。所謂的「中繼資料」,最主要的用途在識別網頁的身份。中繼資料的基本語法 (syntax) 如下,但並非全部的中繼資料都是用這種方式儲存:

<meta name="資料名稱" content="資料值">

從 header.php 來看,會發現第一個中繼資料就跟上述的基本語法不同了。

<meta charset="UTF-8">
<!-- WordPress 預設使用的是 UTF-8 編碼,因此 <?php bloginfo( 'charset' ); ?> 回傳的值預設是 UTF-8,因為我們還沒進入 PHP 的主題,因此為了方便解釋,便改為固定值。 -->

這句話宣告:「當前頁面使用 Unicode-8 編碼。」

當代的網站大多使用 Unicode-8 編碼,但是未來隨著特殊字元逐漸增加,也許不同的編碼會取而代之。

而第二段的 viewport,則在回應式網頁設計扮演相當重要的角色,其最主要的工作,在定義瀏覽器的可見區域。其內容包含下列幾項敘述:

  • width 定義螢幕寬度,透過 width=device-width 告訴瀏覽器可見寬度即為裝置寬度。
  • initial-scale 代表預設的縮放比例,預設值為 1。後續可搭配 minimum-scalemaximum-scale 的敘述,限制使用者可以縮放的範圍。

除了上述的 charsetviewport 外,和行銷與搜尋引擎最佳化 (SEO) 相關的幾個中繼資料如下。

  • <meta name="title" content="文章標題"> 這個標籤主要是呈現於搜尋結果頁面時使用的主標題。如果沒有指定的話,瀏覽器會將 <title> 中的標題視為搜尋結果頁的主標題。
  • <meta name="description" content="文案"> 這個是搜尋結果頁面的連結敘述,相當於廣告的文案。
  • <meta name="robots" content="index, follow"> 透過中繼資料告訴搜尋引擎是否應該檢索該頁面。如果不希望檢索,則將 index 改為 noindex

Open Graph 中繼標籤 (og)

隨著社群網路逐漸發達,許多人會將自己網站的文章,同步分享於 Facebook 粉絲專頁。這時 Open Graph 標籤 (og 標籤) 就扮演十分重要的角色。最常有人問的是「為什麼 Facebook 的截圖是這樣?」這個問題其實就可以透過 Open Graph 的中繼標籤來解決。常見的 Open Graph 中繼標籤如下:

<meta name="og:title" content="Facebook 顯示的文章標題">
<meta name="og:description" content="Facebook 連結顯示的描述">
<meta name="og:image" content="欲於 Facebook 顯示的縮圖網址">

Open Graph 的中繼標籤可以透過 SEO 外掛,如 All in One SEO 與 Yoast SEO 來協助填寫。但需要記得的是:

SEO 外掛只協助你填寫中繼資料欄位,實際上會影響 SEO 排名的,仍然是你的頁面內容,是否符合搜尋者的搜尋目的。

注意事項

你無法透過 Google Tag Manager 或 JavaScript 的方式來增加中繼資料。這是因為中繼資料在其他靜態資料讀取之前,瀏覽器便已讀取 <head> 中的內容。而 Google Tag Manager 的發動時機,則在中繼資料載入以後,因此沒辦法透過 GTM 建立中繼資料。

link

事實上,<link> 最常見的用法,是在引用 CSS 的檔案。常見的語法如下:

<link rel="stylesheet" href="CSS 檔案位置" >

雖然 WordPress 的 PHP 相關功能會在後面的篇章才會提及,但這邊可以先粗略的帶過:誠如 header.php 中所描述的,我們在 <head> 中,並未看到跟 CSS 有關的 <link> 資訊。這是因為如同 <?php bloginfo( 'charset' ); ?>,這裡的 CSS 檔案被包覆在 <?php wp_head(); ?> 當中。
如果你透過瀏覽器的 [開發人員工具] 進行檢測,就可以看到 wp_head() 這個方法包含了哪些 CSS 檔案。
可以補充的是,<link> 這個標籤的特殊屬性 (attribute) rel,是用來指涉這個外部靜態檔案的定位是什麼。以 CSS 而言,通常就會直接如範例班填入 rel="stylesheet"
而除了 stylesheet 以外,rel 這個屬性也包含了其他不同的類型。其中,有一種與網站載入速度最佳化有較直接的關係:

<link rel="preload" src="靜態檔案位置">

這種做法可以告訴瀏覽器,在連結到這個頁面時,可以預先載入哪些資源,減少頁面載入時的檔案請求時間。這裡之所以會使用「靜態檔案位置」,而非「CSS 檔案位置」,最主要的原因在於,rel="preload" 這個屬性,也可以包含 JavaScript。

style

除了透過 <link> 的方式引用外部靜態檔案外,另一種做法是透過 <style> 來定義樣式,其基本語法如下:

<style>
    .css-selector {
        width: 100%;
    }
</style>

必須特別注意的是,有部分的開發人員會將 <style> 寫在 <body> 之中。但根據 W3C 的規範,這是錯誤的。

script

相對於 <link> 同時可包含 CSS 與 JavaScript,<script> 則是單純只於 JavaScript 中使用。其基本語法有兩種,如下所示:

載入外部資源

<script src="外部資源位置.js" async defer></script>

其中 asyncdefer 與網站載入速度也有直接的關係。
在沒有指定 asyncdefer 的情況下,JavaScript 是逐行載入,待完全載入後,才會繼續檢查下一個 <scrip> 標籤。這樣對網頁載入速度會有相當負面的影響。而在 <script> 中加入 asyncdefer 之後,則可以確保瀏覽器「先繼續載入其他資源,等這個資源下載好以後,我們再回頭使用它」,這種技術的正式名稱叫做「非同步載入 (asynchronous)」。而 asyncdefere 的差異如下:

  • async 等到資源下載完畢便執行,與 <script> 所在的位置無關,適合沒有先後順序問題的 JavaScript 使用,如 Google Analytics。
  • defer 即便在資源下載完畢,也會等到網頁內的元素轉譯完畢後,才會執行。如果你的 JavaScript 有順序或相依性的問題,那建議使用 defer

內嵌程式碼

JavaScript 除了可以用上述的方式引用外,也可以直接於頁面中撰寫,其基本語法如下:

<script>
    console.log( "第一次使用 script 標籤" );
    functionName( "Eric" );
    function functionName( name ) {
        console.log( name + ",這裡是你執行 JavaScript 會造成的結果。" );
    }
    //執行後會在瀏覽器中開發人員工具的模擬器 (console) 顯示:「Eric,這裡是你執行 JavaScript 會造成的結果。」
</script>

如何用 WordPress 實踐 link 與 script

前面曾提到,WordPress 會利用 wp_head() 這個方法,取得所有已註冊的資源。但在進入 PHP 的領域以前,你可以先用直接編輯的方式,在 header.php 的檔案中進行改寫。例如:

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >
        <meta name="title" content="這裡可以手動加標題"><!-- 這段是新增的 -->
        <meta name="description" content="這個網頁可以手動加標題"><!-- 這段是新增的 -->
        <meta name="robots" content="index, follow"><!-- 這段是新增的 -->
        <meta name="og:title" content="這裡是 Facebook 的標題"><!-- 這段是新增的 -->
        <meta name="og:description" content="這裡是 Facebook 的連結說明"><!-- 這段是新增的 -->
        <meta name="og:image" content="圖片連結"><!-- 這段是新增的 -->
        
		<link rel="profile" href="https://gmpg.org/xfn/11">

		<?php wp_head(); ?>

	</head>

又或者,你可以透過 WordPress 的模組化機制-勾點 (hook)-來引用不同的靜態資源。
儘管還沒有進入 PHP 的範疇,但這裡可以提供引用靜態資源的基本方法,詳細的說明會留待 PHP 中再做探討:

function eric_enqueue(){
   wp_enqueue_style( '識別 ID (必填)', 'CSS 網址連結 (必填)', '相依的樣式表 ID (選填)', '版本 (選填)', '適用的媒體查詢 (media query,選填)' );
   wp_enqueue_script( '識別 ID (必填)', 'JavaScript 網址連結 (必填)', '相依的程式碼 ID (選填)', '版本 (選填)', 'JavaScript 是否置於頁尾' );
}
add_action( 'wp_enqueue_scripts', 'eric_enqueue' );

只要將上述的代碼,複製貼上於佈景主題或子佈景主題的 functions.php 中,即可引用相對應的靜態資源。
我們一樣以 Twenty Twenty 為例:

//functions.php Line 197
/**
 * Register and Enqueue Scripts.
 */
function twentytwenty_register_scripts() {

	$theme_version = wp_get_theme()->get( 'Version' );

	if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
	wp_script_add_data( 'twentytwenty-js', 'async', true );

}

add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );

上述的程式碼中,我們可以看到 wp_enqueue_script 引用了 Twenty Twenty 的基本 JavaScript 檔案,名為 index.js。這個 JavaScript 並沒有相依的檔案 (array()),而版本編號則根據佈景主題的版本編號定義 ($theme_version = wp_get_theme()->get( 'Version' );)。最重要的是,這個 JavaScript 不要在頁尾執行 (false),而要在頁首 (<head> 當中)。

而如果要使用的是內嵌程式碼的話,則可以用下列的方式執行:

//將 JavaScript 嵌入在 <head> 中
add_action( 'wp_header', function(){?>
    <script>
        console.log( "The header" );
    </script>
}
//將 JavaScript 嵌入在頁尾
add_action( 'wp_footer', function(){?>
    <script>
        console.log( "The footer" );
    </script>
}

結語

本章透過 header.php 這個檔案,說明了當代網站開發 HTML 語法中的 <head> 標籤,究竟隱含了哪些資料。其中,中繼資料對於搜尋引擎最佳化工程,扮演了相當重要的角色,坊間的 SEO 外掛,都是在輔助你填寫上述項目。
而後面談到的 <link><script><style> 則將我們推進到當代網站開發的下一個階段:

完成骨架後,要開始來增添外貌 (CSS) 與靈魂 (JavaScript)。

下一章,我們將進入系列文的第二部分:WordPress 樣式客製化與 CSS。


上一篇
Day 3 從 WordPress 看其他 HTML 標籤
下一篇
Day 5 WordPress 樣式客製化與 CSS:樣式介紹與佈景主題架構
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Oberon Lai
iT邦新手 5 級 ‧ 2022-09-30 13:04:18

Eric 大大

你有實作過 wp_script_add_data() 嗎?我想要加入 defer 但一直不成功,最後還是繞一圈用勾點 script_loader_tag 來處理...Orz

我也是用 script_loader_tag XD,查了一下 wp_script_add_data() 並不是直接讓我們加 attribute 上去的
https://wordpress.stackexchange.com/questions/387674/wp-script-add-data-doesnt-seem-to-work

原來如此,感謝解惑!

我要留言

立即登入留言